<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="p-2 load">
    <div class="mb-[10px]">
      <el-card shadow="hover">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" size="small" label-width="80px">
          <el-form-item label="任务名称" prop="loadExperimentName">
            <el-input v-model="queryParams.loadExperimentName" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="载荷分类" prop="loadType">
            <el-select @change="typeChange" v-model="queryParams.loadType" clearable>
              <el-option v-for="item in typeList" :label="item.label" :value="item.value" :key="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="阶段" prop="stage">
            <el-select @change="typeChange" v-model="queryParams.stage" clearable>
              <el-option v-for="item in setpList" :label="item.label" :value="item.value" :key="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运行状态" prop="state">
            <el-select @change="typeChange" v-model="queryParams.state" clearable>
              <el-option v-for="item in statusList" :label="item.label" :value="item.value"
                :key="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="版本号" prop="version">
            <el-input v-model="queryParams.version" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item style="padding-left: 80px">
            <el-button type="primary" icon="search" @click="doQuery">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <el-card shadow="hover">
      <el-table v-loading="loading" :data="dataList" ref="tableRef">
        <el-table-column label="序号" type="index" width="50"/>
        <el-table-column label="任务名称" prop="loadExperimentName" />
        <el-table-column label="机型" prop="modelNumber" />
        <el-table-column label="载荷分类" prop="loadType" />
        <el-table-column label="阶段" prop="stage" />
        <el-table-column label="载荷版本号" prop="version" />
        <el-table-column label="轮次" prop="roundNumber" />
        <!-- <el-table-column label="版本状态" prop="index" /> -->
        <!-- <el-table-column label="状态" prop="state" /> -->
        <!-- <el-table-column label="创建人" prop="index" />
        <el-table-column label="创建日期" prop="index" /> -->
        <el-table-column label="操作" width="210" fixed="right">
          <template #default="scope">
            <div>
              <!-- <el-tooltip content="重新获取" placement="top">
                <el-button size="small" link type="primary" icon="Edit"
                  @click="handleVisible('result', scope.row)">重新获取</el-button>
              </el-tooltip> -->
              <el-tooltip content="下载" placement="top">
                <el-button size="small" link type="primary" icon="View"
                  @click="handleDownLoad(scope.row)">查看过程数据</el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation">
        <pagination v-show="total > 0" style="margin-top: 0;" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" :total="total" :background="false"
          layout="total, sizes, prev, pager, next, jumper" @pagination="handleCurrentChange" />
      </div>
    </el-card>
    <el-dialog v-model="dialogVisible" v-if="dialogVisible" title="文件列表" width="780px" append-to-body @close="dialogVisible =false">
      <el-table v-loading="fileLoading" :data="fileList" style="width: 100%">
        <el-table-column type="expand">
          <template #default="scope">
            <el-table :data="scope.row.children" style="width: 96%;padding-left:30px">
              <el-table-column label="文件名称" prop="fileName"></el-table-column>
              <el-table-column label="文件大小" prop="size" />
              <el-table-column label="上传时间" prop="date" />
              <el-table-column label="操作" width="120">
                <template #default="subScope">
                  <div>
                    <el-tooltip content="下载" placement="top">
                      <el-button size="small" link type="primary" icon="Download"
                        @click="handleDownLoadFile(subScope.row,'sub')">下载</el-button>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="文件名称" prop="fileName"></el-table-column>
        <el-table-column label="文件大小" prop="size" />
        <el-table-column label="上传时间" prop="date" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <div>
              <el-tooltip content="下载" placement="top">
                <el-button size="small" link type="primary" icon="Download"
                  @click="handleDownLoadFile(scope.row,'parent')">下载</el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="dialogVisible =false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<!-- 载荷分载 -->
<script name="load" setup>
import { queryLoadExperiment, queryLoadExperimentFiles, downloadLoadExperimentFile } from '@/api/mannedLoad';

const loading = ref(false);
const tableRef = ref(null);
const dialogVisible = ref(false);
const fileLoading = ref(false);
const fileList = ref([]);
const dateRangeCreateTime = ref(['', '']);
const typeList = [
  { label: '飞行垂向', value: '飞行垂向' },
  { label: '飞行侧向', value: '飞行侧向' },
  { label: '地面载荷', value: '地面载荷' },
  { label: '动突风', value: '动突风' },
  { label: '动着陆', value: '动着陆' },
  { label: '动滑行', value: '动滑行' },
  { label: '非对称突风', value: '非对称突风' },
  { label: '着陆1g', value: '着陆1g' },
  { label: '突风1g', value: '突风1g' },
];
const setpList = [
  { label: 'G1-G2', value: 'G1-G2' },
  { label: 'G2-G3', value: 'G2-G3' },
  { label: 'G3-G4', value: 'G3-G4' },
  { label: 'G4-G5', value: 'G4-G5' },
  { label: 'G5-G6', value: 'G5-G6' },
  { label: 'G6-G7', value: 'G6-G7' },
  { label: 'G7-G8', value: 'G7-G8' },
  { label: 'G8-G9', value: 'G8-G9' },
  { label: 'G9-G10', value: 'G9-G10' },
];
const statusList = [
  { label: '待开始', value: '待开始' },
  { label: '运行中', value: '运行中' },
  { label: '已完成', value: '已完成' },
  { label: '已终止', value: '已终止' },
  { label: '已暂停', value: '已暂停' },
  { label: '运行错误', value: '运行错误' }
]
const dataList = ref([]);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  loadExperimentName: '',
  loadType: '',
  stage: '',
  state: '',
  version: ''
});
const total = ref(0);

//查询数据
const doQuery = () => {
  queryLoadExperiment(queryParams.value).then((res) => {
    if (res) {
      total.value = res.total;
      dataList.value = res.rows;
    }
  });
};
// 翻页
const handleCurrentChange = () => {
  doQuery();
};
const handleDownLoad = (row) => {
  dialogVisible.value = true;
  fileLoading.value = true;
  queryLoadExperimentFiles({ experimentId: row.id }).then((res) => {
    if (res) {
      fileList.value = res?.data?.children || [];
    }
  }).finally(() => {
    fileLoading.value = false;
  });
};
const handleDownLoadFile = (row,type) => {
  const params = type === 'parent' ? row.children.map(item => item.id):[row.id];
  downloadLoadExperimentFile(params).then((res) => {
    if (res) {
      let blob = new Blob([res]);
      if(type === 'parent'){
        blob = new Blob([res], { type: 'application/zip' });
      }
      const resUrl = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = resUrl;
      if(type === 'parent'){
        link.setAttribute('download', `${row.fileName}.zip`);
      }else{
        link.setAttribute('download', row.fileName);
      }
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  });
};
// 重置
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    type: '',
    taskName: '',
    step: '',
    status: '',
    version: ''
  };
  doQuery();
};
// 删除
const handleDelete = (data) => {
  ElMessageBox.confirm('是否确认删除该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteProfile({ ids: [data.id], type: data.type }).then((res) => {
      ElMessage({ showClose: true, message: '删除成功。', type: 'success' });
      doQuery();
    });
  });
};
onMounted(() => {
  doQuery();
});
</script>
<style lang="scss" scoped>
.load {
  height: calc(100vh - 155px);
  overflow: auto;

  .tiltops {
    color: red;
  }

  .pagenation {
    display: flex;
    justify-content: end;
    margin-top: 10px;
  }
}
</style>